<%--
  Created by IntelliJ IDEA.
  User: ying
  Date: 2022/10/12
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>领劵中心</title>
    <link rel="stylesheet" href="../css/allCoupon.css">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<!-- ===============  搜索框 ================ -->
<div class="header">
    <div class="nav">
        <div class="logo">
            <a href="../index.html"><img src="../images/mycoupon-logo.png" alt="" class="logoimg"></a>
        </div>
        <div class="title">
            领劵中心
        </div>

        <div class="nav_r">
            <div class="search">
                <div class="search_form">
                    <input type="text" class="sc-text">
                    <button>搜索</button>
                </div>
            </div>
            <div class="dropdown">
                <s></s>
                <a href="../personal/myCoupon.jsp">
                    我的优惠券
                </a>
            </div>
        </div>
    </div>
</div>
<!-- ============  为你推荐 ============ -->
<div class="nav-header">
    <div class="w">
        <div class="cate-ul">
            <a href="#" class="cate-item">为你推荐</a>
        </div>
    </div>
</div>
<div class="main">
    <div class="quan-h-wrap">
        <!-- ======================  轮播图 ========================== -->
        <div class="quan-top">
            <div class="top-wrap">
                <div class="top-lcol">
                    <!-- <div class="mod">
                        <div class="item-list"></div>
                        <ul class="panel-main">
                            <li class="s-panel">
                                <a href="#" target="_blank">
                                    <img src="../images/allCoupon-bg1.jpg">
                                </a>
                            </li>
                            <li class="s-panel">
                                <a href="#" target="_blank">
                                    <img src="../images/allCoupon-bg2.jpg">
                                </a>
                            </li>
                        </ul>
                    </div> -->
                    <div class="layui-carousel" id="test10" style="width: 1190px; height: 350px;">
                        <div carousel-item="">
                            <div><img src="../images/allCoupon-bg1.jpg" tppabs="http://res.layui.com/static/images/layui/demo/1.png"></div>
                            <%--                            <div><img src="../images/allCoupon-bg2.jpg" tppabs="http://res.layui.com/static/images/layui/demo/2.png"></div>--%>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ======================  优惠券列表 ======================= -->
        <div class="quan-bottom">
            <div class="quan-content">
                <div class="cate-heading">
                    <span class="i1"></span>
                    <h3>为你推荐好券</h3>
                    <span class="i1"></span>
                </div>
                <!-- =================== 所有优惠券  ================= -->
                <div class="cate-cont">
                    <div class="quan-item"></div>
                    <div class="quan-item"></div>
                    <div class="quan-item"></div>
                    <div class="quan-item"></div>
                    <div class="quan-item"></div>
                    <div class="quan-item"></div>
                    <%--                    <ul class="quan-item B2"> </ul>--%>
                    <%--                    <ul class="quan-item B3"> </ul>--%>
                    <%--                    <ul class="quan-item"> </ul>--%>
                    <%--                    <ul class="quan-item"> </ul>--%>
                    <%--                    <ul class="quan-item"> </ul>--%>
                    <%--                    <ul class="quan-item"> </ul>--%>
                    <%--                    <div class="quan-item">--%>
                    <%--                        <!-- ===========  商品图片 ========== -->--%>
                    <%--                        <div class="q-img">--%>
                    <%--                            <img class="product-img"/>--%>
                    <%--                        </div>--%>
                    <%--                        <!-- ========优惠券中间========== -->--%>
                    <%--                        <div class="q-type">--%>
                    <%--                            <div class="q-price">--%>
                    <%--                                <em>￥</em>--%>
                    <%--                                <Strong>30</Strong>--%>
                    <%--                                <span>满299元可用</span>--%>
                    <%--                            </div>--%>
                    <%--                            <div class="q-range">--%>
                    <%--                                <span class="rage-types">可叠加</span>--%>
                    <%--                                <span class="rage-use">全平台商品可用</span>--%>
                    <%--                            </div>--%>
                    <%--                            <!-- ========= 以抢多少 ============ -->--%>
                    <%--                            <div class="q-progress"></div>--%>
                    <%--                        </div>--%>
                    <%--                        <!-- =====立即领取：上下样式======== -->--%>
                    <%--                        <!-- <div class="q-cricle"> -->--%>
                    <%--                        <i class="i2"></i>--%>
                    <%--                        <i class="i3"></i>--%>
                    <%--                        <!-- </div> -->--%>
                    <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                    <%--                        <div class="q-ops-box">--%>
                    <%--                            <div class="q-optns">--%>
                    <%--                                <a href="#">--%>
                    <%--                                    <b></b>--%>
                    <%--                                    <span>立即领取</span>--%>
                    <%--                                </a>--%>
                    <%--                            </div>--%>

                </div>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                    <div class="quan-item">--%>
                <%--                        <!-- ===========  商品图片 ========== -->--%>
                <%--                        <div class="q-img">--%>
                <%--                            <img class="product-img"/>--%>
                <%--                        </div>--%>
                <%--                        <!-- ========优惠券中间========== -->--%>
                <%--                        <div class="q-type">--%>
                <%--                            <div class="q-price">--%>
                <%--                                <em>￥</em>--%>
                <%--                                <Strong>30</Strong>--%>
                <%--                                <span>满299元可用</span>--%>
                <%--                            </div>--%>
                <%--                            <div class="q-range">--%>
                <%--                                <span class="rage-types">可叠加</span>--%>
                <%--                                <span class="rage-use">全平台商品可用</span>--%>
                <%--                            </div>--%>
                <%--                            <!-- ========= 以抢多少 ============ -->--%>
                <%--                            <div class="q-progress"></div>--%>
                <%--                        </div>--%>
                <%--                        <!-- =====立即领取：上下样式======== -->--%>
                <%--                        <!-- <div class="q-cricle"> -->--%>
                <%--                        <i class="i2"></i>--%>
                <%--                        <i class="i3"></i>--%>
                <%--                        <!-- </div> -->--%>
                <%--                        <!-- ======  优惠券右侧：立即领取========== -->--%>
                <%--                        <div class="q-ops-box">--%>
                <%--                            <div class="q-optns">--%>
                <%--                                <a href="#">--%>
                <%--                                    <b></b>--%>
                <%--                                    <span>立即领取</span>--%>
                <%--                                </a>--%>
                <%--                            </div>--%>
                <%--                        </div>--%>
                <%--                    </div>--%>
                <%--                </div>--%>
            </div>
        </div>
    </div>
</div>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        carousel.render({
            elem: '#test10'
            ,width: '1190px'
            ,height: '350px'
            ,interval: 5000
        });
    });
    //    点击事件

</script>
<%--优惠卷渲染   ajax 异步请求--%>
<script>
    $.ajax({
        type:"GET",
        url:"${pageContext.request.contextPath}/coupon/getAllCoupon",
        success:function (result) {
            /*  json.stringify()将对象、数组转换成字符串        */
            var img = "<div class='q-img'> <img class='product-img'/> </div>";
            var type ="<div class='q-type' ><div class='q-price'> <em >￥</em>"
            var rang="<div class='q-range'> <span class='rage-types'>不可叠加</span> <span class='rage-use'>全平台商品可用</span> </div>"
            var pro="<div class='q-progress'></div> </div>"
            var i2="  <i class='i2'></i> <i class='i3'></i>"
            var aa=" <div class='q-ops-box'> <div class='q-optns'> <a href='javascript:getCoupon()' class='AAA'> <b class='id'> "
            var d="</b> <span class='AA'>立即领取</span> </a> </div> </div>"
            if (result.length == 0) {
                $(".quan-item").html("暂无优惠卷")
                $(".quan-item").show()
            } else {
                for (var i = 0; i < result.length; i++) {
                    var price = JSON.stringify(result[i].couponPrice)
                    var rule = JSON.stringify(result[i].couponRule)
                    var id=JSON.stringify(result[i].couponId)
                    var price1=type+"<strong>"+price+"</strong>"+"<span>"+rule+"</span>"+"</div>"
                    var li=img +price1+rang+pro+i2+aa+id+d
                    $(".id").css("display","none")
                    document.getElementsByClassName('quan-item')[i].innerHTML=li
                    console.log(document.getElementsByClassName('quan-item').length)
                }
            }
        }
    })
    var token=localStorage.getItem("token")
    //    触发事件
    function getCoupon() {
        document.querySelector(".cate-cont").onclick = function (event) {
            var ele = event.target;
            console.log("event" + event.target.nodeName)
            console.log("event" + event.target.className)
            console.log("event"+event.target.parentNode.children[0].innerHTML)
            if(ele.nodeName == "SPAN" && ele.className == "AA"){
                var id= event.target.parentNode.children[0].innerHTML
                var ell=event.target.parentNode
                $.ajax({
                    type:"GET",
                    url:"${pageContext.request.contextPath}/coupon/selectById/"+id,
                    success:function (data){
                        console.log("返回的数据是："+JSON.stringify(data))
                        var  result= confirm("是否抢购优惠券")
                        if(result){
                            $.ajax({
                                type:"GET",
                                url:"${pageContext.request.contextPath}/coupon/selectCoupon/"+id,
                                headers: {'token': token},
                                async:false,
                                success:function (data){
                                    if(data.key==0){
                                        alert("对不起，优惠券已抢完,下次再来")
                                        ell.style.cssText="background:grey"
                                        return false;
                                    }else{
                                        window.location.href="${pageContext.request.contextPath}/personal/myCoupon.jsp"
                                    }
                                }
                            })
                        }else {
                        }

                    }
                })
            }


        }
    }
</script>



</body>
</html>